<template>
  <div class="app" style="display: flex;flex-direction: column">
    <!--    <iframe class="app" src="http://27.25.156.253:8081"></iframe>-->
    <div>
      <el-row :gutter="24">
        <el-col :span="8">
          <dv-decoration-3 style="height: 6vh"></dv-decoration-3>
        </el-col>
        <el-col :span="8">
          <dv-decoration-7 style="height: 6vh;color: #00afff;font-size: 35px">
            <span class="system-title">试验室设备物资 数据驾驶舱</span>
          </dv-decoration-7>
          <dv-decoration-5/>
        </el-col>


        <!--<el-col :span="8"><img src="../assets/images/1712155508764.jpg" class="top-image" alt="Header Image"></el-col>-->
        <el-col :span="8">
          <dv-decoration-3 :reverse="true" style="height: 6vh"></dv-decoration-3>
        </el-col>
      </el-row>
      <div style="position: absolute;right: 1%;top: 6%">
        <el-link style="font-size: 20px; font-weight: 600;position: relative;">

        </el-link>
      </div>
    </div>

    <!--设备【入库设备量前十的设备】、设备停用：数量，设备正常使用：数量，设备报废：数量；
    物资（一级库）【出库物资量前十的物资】、一级库物资每月采购清单总额（入库）、一级库入库出库方式-->
    <!--左侧区域-->
    <!--设备入库量 top10.：物资名称、数量 -->
    <div style="display: flex;flex-direction: row">
      <div style="flex: 1">
        <div style="display: flex;align-items: center;justify-content: center">
          <!-- 环形图容器 -->
          <div style="width:60vh;height:43vh;" ref="ringChart"></div> <!-- 环形图容器 -->
        </div>
        <dv-border-box-11 style="width:60vh;height:40vh; margin-top: 5vh" title="本月用户活跃度 top5.">
          <dv-conical-column-chart ref="scrollBoard" :config="config" style="width: 50vh;height: 30vh;margin: auto"/>
        </dv-border-box-11>
      </div>

      <!--中间区域-->
      <!--设备
             设备停用：数量，设备正常使用：数量，设备报废：数量；
          物资
              一级库入库出库方式：按钮：调拨、个人领用、报废
           -->
      <!--      <div style="position: absolute; margin: 30vh 0vh 0vh 92vh">-->
      <div style="position: absolute; top: 12%;left: 50%;transform: translate(-50%, -50%);">
        <router-link to="/">
          <button class="button-40" role="button">
            <span class="text">进入系统</span>
          </button>
        </router-link>
      </div>
      <div style="flex: 2;flex-direction: column;height: 80vh;margin-top: 4%">
        <div style="box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;color:#fff;height: 50vh">

          <dv-decoration-9 style="height: 6vh; color: #fff; font-size: 25px"> <!-- 更改装饰标题颜色为白色 -->
            <span class="section-title" style="color: #fff;">一级库物资出库 Top：10.</span>
          </dv-decoration-9>
          <dv-scroll-ranking-board :config="wzckTop"
                                   style="width:60vh;height:40vh;padding-top: 0vh;margin: auto" />


        </div>
        <div style="display: flex;justify-content: space-evenly;height: 30vh;align-items: center">
          <!--            <dv-border-box-1 style="height: 10vh;padding: 1px" >-->
          <!--              <div style="font-size: 15px;color: #1c84c6">-->
          <!--                <span>物资总量：</span>-->
          <!--              </div>-->
          <!--            </dv-border-box-1>-->
          <dv-border-box-1 style="height: 10vh;padding: 1px">
            <div style="font-size: 15px;color: #1c84c6">
              <span>本月一级库入库单量：{{ byRkDl }}</span>
            </div>
          </dv-border-box-1>
          <dv-border-box-1 style="height: 10vh;padding: 1px">
            <div style="font-size: 15px;color: #1c84c6">
              <span>本月一级库出库单量：{{ byCkDl }}</span>
            </div>
          </dv-border-box-1>
        </div>

      </div>
      <!--右侧区域-->
      <!-- 物资（一级库）【出库物资量前十的物资】、一级库物资每月采购清单总额（入库）-->
      <div style="flex: 1;position: relative">
        <!--采购物资单 top10.：-->
        <dv-border-box-11 style="width:58vh;height:43vh;" title="采购物资数量 top10.">
          <dv-capsule-chart :config="wzRkl" style="width: 50vh;height: 30vh;margin: auto"/>
        </dv-border-box-11>
        <!--每月采购清单总额：每月的总额：月份：总金额 折线图-->
        <dv-border-box-11 style="width:58vh;height:40vh; margin-top: 5vh" title="近6月每月采购清单总额">
          <dv-capsule-chart :config="configs" style="width: 50vh;height: 30vh;margin: auto"/>
        </dv-border-box-11>
      </div>
    </div>

    <div id="floating-ball"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getSbZtBt, selectUserByDl} from "@/api/sbgl/sbxxgl";
import {getWzCkTop} from "@/api/wzgl/wzck";
import {getByCkDl, getByRkDl, selectRkZeByMonth, selectWzRkl} from "@/api/wzgl/wzrk";

export default {
  data() {
    return {
      ballPosition: {x: 0, y: 0},//球
      ballSpeed: {vx: 2, vy: 1}, // 水平和垂直速度
      ballInterval: null, //球

      visible: false,
      ringChart: null, // 环形图实例
      oneCompanyHonorList: [ //荣誉图片
        {
          name: "Cauliflower",
          src: require("@/assets/images/profile.jpg"),
          title: ""
        },
      ],
      carouselInterval: null, // 定时器引用
      // sbZtBt: [
      //   { name: '直达', value: 335 },
      //   { name: '营销广告', value: 310 },
      //   { name: '搜索引擎', value: 234 },
      //   { name: '邮件营销', value: 135 },
      //   { name: '联盟广告', value: 1548 }
      // ],
      configs: {
        data: [],
        showValue: true
      },
      wzRkl: {
        data: [],
        showValue: true
      },
      wzckTop: {
        data: [],
      },
      config: {
        data: [],

        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        showValue: true,
        valueFormatter({value}) {
          console.warn(arguments)
          const reverseNumber = (value + '').split('').reverse()
          let valueStr = ''

          while (reverseNumber.length) {
            const seg = reverseNumber.splice(0, 3).join('')
            valueStr += seg
            if (seg.length === 3) valueStr += ','
          }

          return valueStr.split('').reverse().join('')
        }
      },
      sbZtBt: [], //设备状态饼图
      byRkDl: null, //本月入库单量
      byCkDl: null, //本月出库单量
    }
  },
  created() {
    this.getSbZtBt()
    this.selectUserByDl()
    this.getWzCkTop()
    this.getByRkDl()
    this.getByCkDl()
    this.selectWzRkl()
    this.selectRkZeByMonth()
  },
  mounted() {
    // this.initRingChart(); // 初始化环形图
    // 添加鼠标事件监听
    this.$nextTick(() => {
      const ringChartDom = this.$refs.ringChart;
      ringChartDom.addEventListener('mouseenter', () => this.stopCarousel());
      ringChartDom.addEventListener('mouseleave', () => this.startCarousel());
    });
    // 初始化漂浮小球
    this.initFloatingBall();
  },
  methods: {
    selectRkZeByMonth() {
      selectRkZeByMonth().then(res => {
        console.log(res.data, 'adsadsadsads')
        this.configs.data = res.data
        this.configs = { ... this.configs}
      })
    },
    //采购物资数量top10
    selectWzRkl() {
      selectWzRkl().then(res => {
        this.wzRkl.data = res.data
        this.wzRkl = { ... this.wzRkl}
      })
    },
    getByCkDl() {
      getByCkDl().then(res => {
        this.byCkDl = res.data
      })
    },
    getByRkDl() {
      getByRkDl().then(res => {
        this.byRkDl = res.msg
      })
    },
    getWzCkTop() {
      getWzCkTop().then(res => {
        this.wzckTop.data = res.data
        this.wzckTop = { ... this.wzckTop}
      })
    },
    //查询登录次数最多的前5个人和次数
    selectUserByDl() {
      selectUserByDl().then(res => {
        this.config.data = res.data
        this.config = { ... this.config}
      })
    },
    //设备状态饼图
    getSbZtBt() {
      getSbZtBt().then(res => {
        this.sbZtBt = res.data;
        if (this.sbZtBt && this.sbZtBt.length > 0) { // 确保有数据后再初始化图表
          this.initRingChart(); // 在这里初始化环形图
        }
      }).catch(error => {
        console.error("Failed to fetch data", error);
      });
    },
    initRingChart() {
      this.ringChart = echarts.init(this.$refs.ringChart); // 初始化环形图
      const option = { // 环形图配置
        title: {
          text: '设备状态图',
          left: 'center',
          textStyle: {color: '#fff'} // 更改标题颜色为白色
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {color: '#fff'} // 更改图例文字颜色为白色
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'], // 设置内半径和外半径，形成环形图
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'center',
              formatter: '{b}: {c} ({d}%)', // 格式化显示内容
              fontSize: '17',
              textStyle: {color: '#fff'} // 更改图例文字颜色为白色
            },
            emphasis: {
              label: {
                show: false // 高亮时不显示
              }
            },
            labelLine: {
              show: false
            },
            data: this.getFormattedData()
          }
        ]
      };
      this.ringChart.setOption(option); // 设置图表选项
      // 启动轮播
      this.startCarousel();
    },
    // 获取格式化后的数据
    getFormattedData() {
      return this.sbZtBt.map(item => ({
        value: item.value,
        name: item.name,
        label: {
          show: false // 默认不显示所有数据标签
        }
      }));
    },
    // 开始轮播
    startCarousel() {
      if (this.carouselInterval) clearInterval(this.carouselInterval);
      let currentIndex = 0;
      this.carouselInterval = setInterval(() => {
        this.updateLabel(currentIndex);
        currentIndex = (currentIndex + 1) % this.sbZtBt.length;
      }, 3000); // 每3秒切换一次
    },

    // 更新当前显示的数据标签
    updateLabel(index) {
      const data = this.getFormattedData();
      data[index].label.show = true; // 显示当前索引的数据标签
      this.ringChart.setOption({
        series: [{
          data: data
        }]
      });
    },

    // 停止轮播
    stopCarousel() {
      if (this.carouselInterval) clearInterval(this.carouselInterval);
    },
    initFloatingBall() {
      const ball = document.getElementById('floating-ball');

      function randomPosition() {
        const viewportWidth = window.innerWidth - ball.offsetWidth;
        const viewportHeight = window.innerHeight - ball.offsetHeight;

        let x = Math.random() * viewportWidth;
        let y = Math.random() * viewportHeight;

        ball.style.transform = `translate(${x}px, ${y}px)`;
      }

      // 设置初始位置
      randomPosition();

      // 每隔一段时间改变位置
      this.floatingBallInterval = setInterval(randomPosition, 3000); // 每3秒改变一次位置

      // 监听窗口大小变化以更新视口尺寸
      window.addEventListener('resize', randomPosition);
    },

    // 如果需要清除定时器（例如在组件卸载时）
    beforeDestroy() {
      if (this.floatingBallInterval) {
        clearInterval(this.floatingBallInterval);
      }
    }
  },
}
</script>

<style scoped>
.button-38 {
  color: #fff;
  padding: 15px 25px;
  border-radius: 14px;
  font-weight: bold;
  font-size: 16px;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  box-shadow: rgba(255, 255, 255, 0.1) -3px -3px 9px inset,
  rgba(255, 255, 255, 0.15) 0 3px 9px inset,
  rgba(255, 255, 255, 0.6) 0 1px 1px inset,
  rgba(0, 0, 0, 0.3) 0 -8px 36px inset,
  rgba(255, 255, 255, 0.6) 0 1px 5px inset,
  rgba(0, 0, 0, 0.2) 2px 19px 31px;
  background-color: #7F00FF;
  background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, .23) 0, transparent 86.18%),
  radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
  transition: all 150ms ease-in-out;
}

.button-38:hover {
  filter: brightness(1.05);
}

.button-38:active {
  transform: scale(.95);
}

/*小球 */
#floating-ball {
  position: absolute;
  width: 20px; /* 小球的宽度 */
  height: 20px; /* 小球的高度 */
  background-color: #00b0ff; /* 小球的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  box-shadow: 0 0 15px rgba(107, 255, 142, 0.8); /* 添加阴影效果 */
  z-index: 1000; /* 确保小球位于所有其他内容之上 */
  transition: transform 3s ease-in-out, opacity 2s ease; /* 定义平滑过渡，并添加透明度过渡 */
  opacity: 0.5; /* 设置小球的透明度 */
}

.button-40 {
  --glow-color: rgb(217, 176, 255);
  --glow-spread-color: rgba(191, 123, 255, 0.781);
  --enhanced-glow-color: rgb(231, 206, 255);
  --btn-color: rgb(100, 61, 136);
  border: .25em solid var(--glow-color);
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 15px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
  0 0 4em 1em var(--glow-spread-color),
  inset 0 0 .75em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
}

.button-40::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

.button-40:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
  0 0 4em 2em var(--glow-spread-color),
  inset 0 0 .75em .25em var(--glow-color);
}

.button-40:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
  0 0 2.5em 2em var(--glow-spread-color),
  inset 0 0 .5em .25em var(--glow-color);
}

.app {
  position: relative;
  background: url('../assets/images/bg.png') center center no-repeat, #040505; /*添加背景图片和颜色*/
  background-size: cover;
  width: 100%;
  height: calc(100vh);
  border: 1px solid #0C1723;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperLeft {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5); /* 模块背景颜色 并透明显示 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.upperLeft:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中上 */
.soSo {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.soSo:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.upperRight:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 左中 */
.leftMiddle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 36%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.leftMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中 */
.middle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 38%; /* 距离左侧1% */
  width: 25%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

/* 右中 */
.rightMiddle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 64%; /* 距离左侧1% */
  width: 35%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.rightMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.lowerLeft:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中下 */
.lowerMiddle {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.lowerMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

.lowerRight:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}


/deep/ .border-box-content {
  color: rgb(66, 185, 131) !important;
  font-size: 40px !important;
  font-weight: bold !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/deep/ .el-table--mini {
  font-size: 11px !important;
}

/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  background-color: #0B243F !important;
}

/deep/ .el-table__body, .el-table__footer, .el-table__header {
  font-size: 16px !important;
}

/deep/ .el-table th.el-table__cell > .cell {
  color: #00AFE0 !important;
}

/deep/ .el-table td.el-table__cell div {
  color: white !important;
}

/deep/ .el-table__body tr:hover > td {
  background-color: #788081 !important; /* 鼠标移入ElTable后的行背景色 */
}
</style>
